<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Cypress入门 &middot; pfan</title>
        <meta name="description" content="Cypress包含测试网站所必须的所有组件，可以快速编写测试用例。
下载源码 git clone github.com/ahfarmer/emoji-search #安装依赖 cd emoji-search &amp;&amp; npm install #启动项目 npm run start #访问http://localhost:3000 安装Cypress #安装 npm install cypress —save-dev #启动 npx cypress open #或者 ./node_modules/.bin/cypress open #或者 $(npm bin)/cypress open 以上命令将会在项目根目录创建cypress文件夹，如下： 创建测试用例 默认情况下，所有测试都存储在cypress/integration文件夹中，该文件夹在第一次Cypress启动时自动创建。 在此示例中，我们将编写一个测试，该测试将：
检查输入单词lollipop后是否在页面上仅显示一个结果
检查标题类的标签是否包含正确的文本
首先在cypress/integration目录中创建一个sample_spec.js文件：
该文件应包含以下代码：
describe(&#39;Sample test&#39;, () =&gt; { it(&#39;Search lollipop emoji&#39;, () =&gt; { cy.visit(&#39;http://localhost:3000/&#39;) // launch project website  cy.get(&#39;input&#39;).type(&#39;lollipop&#39;) // enter &#39;lollipop&#39; in search  cy.get(&#39;.component-emoji-result-row&#39;).should(&#39;have.length&#39;, 1) // check if only 1 result is returned  cy.">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="generator" content="Hugo 0.73.0" />
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta property="og:title" content="Cypress入门">
<meta property="og:description" content="Cypress包含测试网站所必须的所有组件，可以快速编写测试用例。
下载源码 git clone github.com/ahfarmer/emoji-search #安装依赖 cd emoji-search &amp;&amp; npm install #启动项目 npm run start #访问http://localhost:3000 安装Cypress #安装 npm install cypress —save-dev #启动 npx cypress open #或者 ./node_modules/.bin/cypress open #或者 $(npm bin)/cypress open 以上命令将会在项目根目录创建cypress文件夹，如下： 创建测试用例 默认情况下，所有测试都存储在cypress/integration文件夹中，该文件夹在第一次Cypress启动时自动创建。 在此示例中，我们将编写一个测试，该测试将：
检查输入单词lollipop后是否在页面上仅显示一个结果
检查标题类的标签是否包含正确的文本
首先在cypress/integration目录中创建一个sample_spec.js文件：
该文件应包含以下代码：
describe(&#39;Sample test&#39;, () =&gt; { it(&#39;Search lollipop emoji&#39;, () =&gt; { cy.visit(&#39;http://localhost:3000/&#39;) // launch project website  cy.get(&#39;input&#39;).type(&#39;lollipop&#39;) // enter &#39;lollipop&#39; in search  cy.get(&#39;.component-emoji-result-row&#39;).should(&#39;have.length&#39;, 1) // check if only 1 result is returned  cy.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.steps.info/2020/05/20/cypress%E6%B5%8B%E8%AF%95%E5%85%A5%E9%97%A8/">
        <link rel="stylesheet" href="https://blog.steps.info/dist/site.css">
        <link rel="stylesheet" href="https://blog.steps.info/dist/syntax.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin,cyrillic-ext,latin-ext,cyrillic">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
        
        
        
    </head>
    <body>
        
<script type="application/javascript">
var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
var doNotTrack = (dnt == "1" || dnt == "yes");
if (!doNotTrack) {
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
	ga('create', 'XXX', 'auto');
	ga('set', 'anonymizeIp', true);
	ga('send', 'pageview');
}
</script>


        <div id="wrapper">
            <header class="site-header">
                <div class="container">
                    <div class="site-title-wrapper">
                        
                            <h1 class="site-title">
                                <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                            </h1>
                        
                        <a class="button-square" href="https://blog.steps.info/index.xml"><i class="fa fa-rss"></i></a>
                        
                            <a class="button-square button-social hint--top" data-hint="Twitter" title="Twitter" href="https://twitter.com/pangel3" rel="me">
                                <i class="fa fa-twitter"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Gitlab" title="Gitlab" href="https://gitlab.com/funnypan" rel="me">
                                <i class="fa fa-gitlab"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Github" title="Github" href="https://github.com/RazzilDarkbrew" rel="me">
                                <i class="fa fa-github-alt"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Stack Overflow" title="Stack Overflow" href="https://stackoverflow.com/users/7784704/stepsinfo" rel="me">
                                <i class="fa fa-stack-overflow"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Email" title="Email" href="mailto:gemini0525@foxmail.com">
                                <i class="fa fa-envelope"></i>
                            </a>
                        
                    </div>

                    <ul class="site-nav">
                        
                    </ul>
                </div>
            </header>

            <div id="container">


<div class="container">
    <article class="post-container" itemscope="" itemtype="http://schema.org/BlogPosting">
        <header class="post-header">
    <h1 class="post-title" itemprop="name headline">Cypress入门</h1>
    
    <p class="post-date">
        <span>Published <time datetime="2020-05-20" itemprop="datePublished">Wed, May 20, 2020</time></span>
        <span>by</span>
        <span itemscope="" itemprop="author" itemtype="https://schema.org/Person">
            <span itemprop="name">
                <a href="https://github.com/RazzilDarkbrew" itemprop="url" rel="author">pfan</a>
            </span>
        </span>
    </p>
    
        <p class="post-reading post-line">
            <span>Estimated reading time: 1 min</span>
        </p>
    
</header>

        <div class="post-content clearfix" itemprop="articleBody">
    

    <p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/uPic/XBcHdy.jpg" alt="XBcHdy"></p>
<p>Cypress包含测试网站所必须的所有组件，可以快速编写测试用例。</p>
<h2 id="下载源码">下载源码</h2>
<div class="highlight"><pre class="chroma"><code class="language-shell" data-lang="shell">git clone github.com/ahfarmer/emoji-search
<span class="c1">#安装依赖</span>
<span class="nb">cd</span> emoji-search <span class="o">&amp;&amp;</span> npm install
<span class="c1">#启动项目</span>
npm run start
<span class="c1">#访问http://localhost:3000</span>
</code></pre></div><p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/uPic/65rXws.jpg" alt="65rXws"></p>
<h2 id="安装cypress">安装Cypress</h2>
<div class="highlight"><pre class="chroma"><code class="language-shell" data-lang="shell"><span class="c1">#安装</span>
npm install cypress —save-dev

<span class="c1">#启动</span>
npx cypress open
<span class="c1">#或者</span>
./node_modules/.bin/cypress open
<span class="c1">#或者</span>
<span class="k">$(</span>npm bin<span class="k">)</span>/cypress open
</code></pre></div><p>以上命令将会在项目根目录创建<code>cypress</code>文件夹，如下：
<img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/uPic/09GuGd.jpg" alt="09GuGd"></p>
<h2 id="创建测试用例">创建测试用例</h2>
<p>默认情况下，所有测试都存储在<code>cypress/integration</code>文件夹中，该文件夹在第一次<code>Cypress</code>启动时自动创建。
在此示例中，我们将编写一个测试，该测试将：</p>
<p>检查输入单词<code>lollipop</code>后是否在页面上仅显示一个结果</p>
<p>检查标题类的标签是否包含正确的文本</p>
<p>首先在<code>cypress/integration</code>目录中创建一个<code>sample_spec.js</code>文件：</p>
<p>该文件应包含以下代码：</p>
<div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;Sample test&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;Search lollipop emoji&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="nx">cy</span><span class="p">.</span><span class="nx">visit</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/&#39;</span><span class="p">)</span> <span class="c1">// launch project website
</span><span class="c1"></span>        <span class="nx">cy</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">).</span><span class="nx">type</span><span class="p">(</span><span class="s1">&#39;lollipop&#39;</span><span class="p">)</span> <span class="c1">// enter &#39;lollipop&#39; in search 
</span><span class="c1"></span>        <span class="nx">cy</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;.component-emoji-result-row&#39;</span><span class="p">).</span><span class="nx">should</span><span class="p">(</span><span class="s1">&#39;have.length&#39;</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span> <span class="c1">// check if only 1 result is returned 
</span><span class="c1"></span>        <span class="nx">cy</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="s1">&#39;Lollipop&#39;</span><span class="p">).</span><span class="nx">should</span><span class="p">(</span><span class="s1">&#39;have.class&#39;</span><span class="p">,</span> <span class="s1">&#39;title&#39;</span><span class="p">)</span> <span class="c1">// check if returned element contains &#39;title&#39; class
</span><span class="c1"></span>    <span class="p">})</span>
<span class="p">})</span>
</code></pre></div><p>你将会看到这样的窗口：</p>
<p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/uPic/ZabqgO.jpg" alt="ZabqgO"></p>
<p>单击<code>sample_spec.js</code>后，将打开一个带有搜索引擎实例的窗口，您可以在其中实时预览执行的测试。
结果应如下所示（请记住，带有示例性网站的项目应该正在运行）：</p>
<p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/uPic/3NotH3.jpg" alt="3NotH3"></p>

</div>

        <footer class="post-footer clearfix">
    
        <p class="post-tags">
            <span>Tagged:</span>
            
            
                <a href="/tags/translate/">translate</a>
            
        </p>
    

    <div class="share">
        
            <a class="icon-twitter" href="https://twitter.com/share?text=Cypress%e5%85%a5%e9%97%a8&url=https%3a%2f%2fblog.steps.info%2f2020%2f05%2f20%2fcypress%25E6%25B5%258B%25E8%25AF%2595%25E5%2585%25A5%25E9%2597%25A8%2f"
                onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
                <i class="fa fa-twitter"></i>
                <span class="hidden">Twitter</span>
            </a>
        

        
            <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fblog.steps.info%2f2020%2f05%2f20%2fcypress%25E6%25B5%258B%25E8%25AF%2595%25E5%2585%25A5%25E9%2597%25A8%2f"
                onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
                <i class="fa fa-facebook"></i>
                <span class="hidden">Facebook</span>
            </a>
        

        
            <a class="icon-google-plus" href="https://plus.google.com/share?url=https%3a%2f%2fblog.steps.info%2f2020%2f05%2f20%2fcypress%25E6%25B5%258B%25E8%25AF%2595%25E5%2585%25A5%25E9%2597%25A8%2f"
              onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
              <i class="fa fa-google-plus"></i>
                <span class="hidden">Google+</span>
            </a>
        
        
    </div>
</footer>

        
    <div class="comments">
        
    </div>

    </article>
</div>

            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <div class="site-title-wrapper">
                    <h1 class="site-title">
                        <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                    </h1>
                    <a class="button-square button-jump-top js-jump-top" href="#">
                        <i class="fa fa-angle-up"></i>
                    </a>
                </div>

                <p class="footer-copyright">
                    <span>&copy; 2020 / Powered by <a href="https://gohugo.io/">Hugo</a></span>
                </p>
                <p class="footer-copyright">
                    <span><a href="https://github.com/roryg/ghostwriter">Ghostwriter theme</a> By <a href="http://jollygoodthemes.com">JollyGoodThemes</a></span>
                    <span>/ <a href="https://github.com/jbub/ghostwriter">Ported</a> to Hugo By <a href="https://github.com/jbub">jbub</a></span>
                </p>
            </div>
        </footer>

        <script src="https://blog.steps.info/js/jquery-1.11.3.min.js"></script>
        <script src="https://blog.steps.info/js/jquery.fitvids.js"></script>
        <script src="https://blog.steps.info/js/scripts.js"></script>
    </body>
</html>

